import React from 'react'
import { Image, List,Rate,Popup } from 'antd-mobile'
import '@/assets/css/detail.css'

// 引入地图组件
import { TMap, InfoWindow } from '@map-component/react-tmap';

const Component = () =>
{
    //接收跳转参数
    const [searchParams] = React.Router.useSearchParams()

    let [rid, SetRID] = React.useState(searchParams.get('rid') ? searchParams.get('rid') : 0)
    let ref = React.useRef(null)
    let [business, SetBusiness] = React.useState([])
    let [data, SetData] = React.useState([])
    const [visible, setVisible] = React.useState(false)
    const [visible1, setVisible1] = React.useState(false)
    let [room, SetRoom] = React.useState({
        name:'',
        price:'',
        state:'',
        thumb_text:'',
        flag_text:[],
        content: '',
        total: 0,
        comment: '',
        thumbs_text: [],
        coupon: [],
        device_text: [],
    })

    React.useEffect(() => {
        RoomData()
        BusinessData()
        datalist()
    }, [])


    //请求详情
    const RoomData = async () =>
    {
        var result = await React.HTTP.post("/room/info", {rid})

        if(result.code == 0)
        {
            React.error(result.msg)
            return false
        }

        SetRoom(result.data)
    }

    //请求详情
    const BusinessData = async () =>
    {
        var result = await React.HTTP.post("/business/index", null)

        if(result.code == 0)
        {
            React.error(result.msg)
            return false
        }

        SetBusiness(result.data)
    }

    //请求详情
    const datalist = async () =>
    {
        var result = await React.HTTP.post("/business/list", null)

        if(result.code == 0)
        {
            React.error(result.msg)
            return false
        }

        SetData(result.data)
    }

    // 轮播图组件
    const CouponItem = room.thumbs_text.map((item:any, key) => {
        return (
            <React.UI.Swiper.Item key={key}>
                {key<4 && <React.UI.Image src={item} width={'100%'} fit='fill' />}
            </React.UI.Swiper.Item>
        )
    })

    const confirm = () =>
    {
        if(!React.Business.id)
        {
            React.error('请先登录', () => {});
            return false
        }

        React.navigate(`room/confirm?rid=${rid}`)
    }
    // console.log(data)

    return (
        <>
            <React.UI.NavBar 
                style={{background: `rgb(55, 68, 134)`, color:'#fff'}}
                back='返回' 
                onBack={React.back}
            >{room.name}</React.UI.NavBar>
            
            <React.UI.Swiper>
                {CouponItem}
            </React.UI.Swiper>

            <div className="detail_top">
                <div id="intro" className="intro">
                    <div className="title">{room.name}</div>
                    <div className="betwee">
                        <div className="left">
                            {room.flag_text && room.flag_text.map((flag:any, index:any) => <span key={index}>{flag}</span>)}
                        </div>
                        <div className="right" onClick={() => {setVisible1(true)}}>分享</div>
                        <Popup
                                visible={visible1}
                                onMaskClick={() => {
                                    setVisible1(false)
                                }}
                                >
                                <div style={{ height: '30vh', overflowY: 'scroll' }}>
                                    <div > 
                                        <a href="#"  data-toggle="modal" data-target="#myWeixin">
                                            {/* <img src="./assets/images/answer.png" alt="" /> */}
                                            微信
                                        </a>
                                        <a href="#"  data-toggle="modal" data-target="#myWeixin">
                                            {/* <img src="./assets/images/answer.png" alt="" /> */}
                                            微信
                                        </a>
                                        <a href="#"  data-toggle="modal" data-target="#myWeixin">
                                            {/* <img src="./assets/images/answer.png" alt="" /> */}
                                            微信
                                        </a>
                                    </div>
                                    <div > 
                                        <a href="#"  data-toggle="modal" data-target="#myWeixin">
                                            {/* <img src="./assets/images/answer.png" alt="" /> */}
                                            微信
                                        </a>
                                        <a href="#"  data-toggle="modal" data-target="#myWeixin">
                                            {/* <img src="./assets/images/answer.png" alt="" /> */}
                                            微信
                                        </a>
                                        <a href="#"  data-toggle="modal" data-target="#myWeixin">
                                            {/* <img src="./assets/images/answer.png" alt="" /> */}
                                            微信
                                        </a>
                                    </div>
                                </div>
                        </Popup>
                    </div>
                    <div className="title">{room.content}</div>
                </div>

                <div className="notesin">
                    <div className="title">预订须知</div>
                    <div className="item">
                        <span className="tips">预订房型：</span>
                        <span>{room.name}</span>
                    </div>
                    <div className="item">
                        <span className="tips">入离时间：</span>
                        <span>15:00 后入住，12:00 前退房</span>
                    </div>
                    <div className="item">
                        <span className="tips">房间数量：</span>
                        <span>{room.total}</span>
                    </div>
                </div>

                <div className="preferential">
                    <div className="title">优惠</div>
                    <div className="coupon-list">
                        <div className="left">
                            {room.coupon.map((item:any, key) => 
                                <div className="lzs" key={key}>
                                    <div className="item" onClick={() => React.navigate(`/coupon/info?cid=${item.id}`)}>
                                        <div className="item_l">
                                            {item.rate}折
                                        </div>
                                        <div className="item_r">
                                            全场{item.rate}折
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>
                        <div className="right" onClick={() => React.navigate('/')}>
                            更多
                        </div>
                    </div>
                </div>

                <div id="facility" className="facility">
                    <div className="title">设施服务</div>
                    <div className="plan">
                        {room.device_text && room.device_text.map((item:any, key) => <div className="item" key={key}>
                            <img src="./assets/images/answer.png" alt="" />
                            <span>{item}</span>
                        </div>
                        )}
                    </div>
                </div>

                <div className="comment">
                    <div className="title">地图路线</div>
                    <TMap
                        // 密钥
                        mapKey="BBGBZ-YVMKJ-JGVF7-D62JA-EO7TO-RRFZV"
                        version='1.exp'
                        center={{ lat: 39.984104, lng: 116.307503 }}
                    />
                </div>

                <div id="comment" className="comment">
                    <div className="title">评价
                            <React.UI.List>
                                {business.map((item:any, key) => (
                                    <React.UI.SwipeAction ref={ref} key={key}>
                                        <List.Item
                                        key={key}
                                        prefix={
                                            <Image
                                            src={item.avatar_text}
                                            style={{ borderRadius: 20 }}
                                            fit='cover'
                                            width={40}
                                            height={40}
                                            />
                                        }
                                        description={item.rorder.rate && <Rate readOnly value={item.rorder.rate} style={{
                                            '--star-size': '13px',
                                        }} />}
                                        >
                                            {item.nickname}
                                        </List.Item>
                                        <p>{item.rorder.comment}</p>
                                    </React.UI.SwipeAction>
                                ))}
                            </React.UI.List>

                        <div className='lzs'>
                            <React.UI.Button
                                onClick={() => {
                                setVisible(true)
                                }}
                            >
                                点击更多...
                            </React.UI.Button>

                            <Popup
                                visible={visible}
                                onMaskClick={() => {
                                    setVisible(false)
                                }}
                                >
                                <div style={{ height: '30vh', overflowY: 'scroll' }}>
                                    <React.UI.List>
                                        {data.map((item:any, key) => (item.rorder.rate && <React.UI.SwipeAction ref={ref} key={key}>
                                                <List.Item
                                                key={key}
                                                prefix={
                                                    <Image
                                                    src={item.avatar_text}
                                                    style={{ borderRadius: 20 }}
                                                    fit='cover'
                                                    width={40}
                                                    height={40}
                                                    />
                                                }
                                                description={item.rorder.rate && <Rate readOnly value={item.rorder.rate} style={{
                                                    '--star-size': '13px',
                                                }} />}
                                                >
                                                    {item.nickname}
                                                </List.Item>
                                                <p className='lzs'>{item.rorder.comment}</p>
                                            </React.UI.SwipeAction>
                                        ))}
                                    </React.UI.List>
                                </div>
                            </Popup>
                        </div>
                    </div>
                </div>
            </div>

            <div className="foot-bar">
                <div className="price">
                    ￥{room.price}
                </div>
                <React.UI.Button onClick={confirm} color='primary' disabled={room.state ? false: true}>立即预定</React.UI.Button>
            </div>
        </>
    )
}

export default Component